// This placeholder gives elements a background hover state that matches their
// current text color.
// 
// !!! IMPORTANT !!!
// Because this placeholder uses a pseudo element, it can't be used with
// elements that appear inline in paragraphs. If those elements are split across
// two lines, the hover state will break.
// https://twitter.com/rob_dodson/status/1335077889641832449

%overlay {
  overflow: hidden;
  position: relative;

  &::before {
    background-color: var(--overlay-background-color, currentColor);
    border-radius: 2px;
    content: '';
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    transition: 0.2s opacity;
    width: 100%;
  }

  &:hover::before {
    opacity: 0.08;
  }

  &:focus-within::before {
    opacity: 0.12;
  }

  &:active::before {
    opacity: 0.16;
  }  
}
